<template>
  <div>
    <el-form ref="searchFormRef" class="v-search-s1" :model="searchForm" :inline="true">
      <el-row :gutter="30" class="fx-wrap">
        <el-col :xs="12" :sm="10" :md="8">
          <el-form-item label="名称" prop="nickName">
            <el-input v-model="searchForm.name" placeholder="请输入" clearable @keyup.enter="searchData"/>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="10" :md="8" style="height: 50px">
          <div class="fx fx-sta-cen fx-nowrap">
            <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
            <el-button icon="Refresh" @click="resetSearch">重置</el-button>
          </div>
        </el-col>

      </el-row>


    </el-form>

    <!--Table-->
    <div class="v-table-s1 fx-col">

      <!--按钮-->
      <div class="fx-sta-cen">
        <el-button type="primary" icon="Plus" @click="openAdd">新增</el-button>
        <div class="fx1"></div>
        <div>

        </div>
      </div>
      <!--表格-->
      <el-table :data="option.tableData" border highlight-current-row v-loading="option.loading"
                @selection-change="selectionChange" style="margin-top: 16px">
        <el-table-column prop="date" label="序号" width="100" align="center">
          <!--          <template #default="scope">-->
          <!--             {{ scope.$index  scope.row  }} -->
          <!--          </template>-->
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <!--        label String 标注内容-->
        <el-table-column prop="name" label="名称" min-width="80" align="center"/>
        <el-table-column prop="sign" label="标识" min-width="80" align="center"/>
        <el-table-column prop="path" label="地址" min-width="80" align="center"/>
        <el-table-column prop="loading_method" label="加载方式" min-width="100" align="center"/>
        <el-table-column prop="format" label="格式" min-width="80" align="center"/>
        <el-table-column prop="coordinate_system" label="坐标系" min-width="100" align="center"/>

        <el-table-column prop="layer_order" label="图层顺序" min-width="100" align="center"/>

        <el-table-column prop="is_view" label="初始化状态" min-width="120" align="center">
          <template #default="scope">{{ scope.row.is_view == '1' ? '显示' : '隐藏' }}</template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="150" align="center">
          <template #default="scope">
            <el-button icon="Edit" link type="primary" @click="openEdit(scope)">
              编辑
            </el-button>
            <el-button icon="Delete" link type="primary" @click="deleteOne(scope)">
              删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="fx-end" style="margin-top: 15px">
        <el-pagination
            background
            :total="option.total"
            :page-sizes="option.pageSizes"
            v-model:current-page="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="searchData"
            @current-change="searchData"
        />
      </div>

    </div>

    <Add v-if="option.openAddDialog"
         v-model:open="option.openAddDialog"
         :data="option.demAddData"
         :dictValue="option.dictValue"
         @ok="addSuccess">
    </Add>


    <Edit v-if="option.openEditDialog"
          v-model:open="option.openEditDialog"
          :data="option.editData"
          :dictValue="option.dictValue"
          @ok="editSuccess">
    </Edit>

  </div>
</template>

<script setup>
import $modal from "@/util/element/modal.js";
import Add from "@/view/gis/layer/Add.vue";
import Edit from "@/view/gis/layer/Edit.vue";
import {apiLayerDel, apiLayerList} from "@/api/index.js";

//页面加载完成回调
onMounted(() => {
  // ////// console.log("onMounted")
  searchData()
})

onUnmounted(() => {
  // ////// console.log("onUnmounted")
});


const {proxy} = getCurrentInstance();

let optionKey = {
  loading: false,
  dictCode: 'enuCommonStatus,enuUserMtAuth',
  dictValue: [1, 2, 3],
  openAddDialog: false,
  openEditDialog: false,
  tableData: [],
  tableSelectIds: [],
  selectNames: [],
  pageSizes: [1, 10, 20, 50, 100],
  total: 0,
  nowRoleId: 0,
  defaultChecked: [],
  allRole: [],
  tableHeight: 0,
  searchIsOpen: false,
  editData: {},
}
const searchKey = {
  pageNum: 1,
  pageSize: 10,
}

let searchForm = reactive(searchKey)
let option = reactive(optionKey);

function resetSearch() {
  proxy.$refs["searchFormRef"].resetFields();
}

function selectionChange(rows) {
  //// console.log("selectionChange rows", rows)
  option.tableSelectIds = rows.map(item => item.id);
  //// console.log("option.tableSelectIds ", option.tableSelectIds)
  option.tableSelectIds.filter(item => {
    //// console.log(item)
  })
  // option.selectNames = rows.map(item => item.account);
}

//搜索数据
function searchData() {
  option.loading = true;

  apiLayerList(searchForm).then(res => {
    option.loading = false;
    option.tableData = res.data.rows
    option.total = res.data.total
    //// console.log(res)
    // option.tableData;
  })

}


function openAdd() {
  option.openAddDialog = true;
  option.demDeitData = null
}

function addSuccess(res) {
  searchData()
}

function openEdit(scope) {
  //// console.log(scope.$index, scope.row)
  option.openEditDialog = true;
  option.editData = scope.row
}

function editSuccess(res) {
  searchData()
}

function deleteOne({$index, row}) {
  //// console.log($index, row)
  let content = `是否删除 ${row.name}？ `
  $modal.confirmWarning(content).then(async () => {
    let res = await apiLayerDel({id: row.id})
    if (res.code != 200) {
      $modal.error(res.msg);
      return;
    }
    $modal.success();
    searchData()
  }).catch(() => {
    // $modal.cancel()
  });
}


function deleteList(scope) {
  if (option.selectIds.length === 0) {
    $modal.warning("请至少选择一条数据");
    return;
  }

  ////// console.log(ids)
  let content = `正在删除名称为【 ${option.value.selectNames.join("、")}】 的数据项，是否确定删除？ `
  $modal.confirmWarning(content)
      .then(async () => {
        let res = await apiDictDelete({ids: option.value.selectIds.join(",")})
        if (res.success) {
          $modal.success();
          searchData()
        }
      }).catch(() => $modal.cancel());


  //// console.log(scope.$index, scope.row)
}

// 等待UI更新后，计算Table高度
function calcTableHeight() {

  nextTick(() => {
    //// console.log("ldRef.offsetHeight", proxy.$refs.ldRef.offsetHeight)
    //// console.log("sfdRef.offsetHeight", proxy.$refs.sfdRef.offsetHeight)
    //// console.log("bdRef.offsetHeight", proxy.$refs.bdRef.offsetHeight)
    //// console.log("tpRef.offsetHeight", proxy.$refs.tpRef.offsetHeight)
    let ldRef = proxy.$refs.ldRef ? proxy.$refs.ldRef.offsetHeight : 0
    let sfdRef = proxy.$refs.sfdRef ? proxy.$refs.sfdRef.offsetHeight : 0
    let bdRef = proxy.$refs.bdRef ? proxy.$refs.bdRef.offsetHeight : 0
    let tpRef = proxy.$refs.tpRef ? proxy.$refs.tpRef.offsetHeight : 0

    option.value.tableHeight = ldRef - sfdRef - bdRef - tpRef - 12 - 16 - 16 - 8
    //// console.log("tableHeight", option.value.tableHeight)
    // this.scrollHeight = this.$refs.d99.offsetHeight - this.$refs.d100.offsetHeight;
  })
}
</script>

<style scoped lang="scss">
:deep(.el-table th.el-table__cell) {
  background: #FAFAFA
}

:deep(.el-table thead) {
  color: #000;
  font-size: 15px;
  font-weight: bold;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0px;
  width: 100%;
}

</style>

